<template>
    <div id="content">
        <div class="main move-box">
            <div class="L" id="silder-left" style="min-width: 280px">
                <CardTree
                    ref="tree"
                    activeItem="fund"
                    @handleActiveItem="handleActiveItem"
                    @handleTreeNodeData="handleTreeNodeData"
                    :pageType="$attrs.pageType"
                />
                <div class="move-btn" v-move-crosswise></div>
            </div>
            <div class="R silder-right">
                <CardProductionMain :activeItem="activeItem" :treeNodeData="treeNodeData" :pageType="$attrs.pageType" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { checkPermission } from '@/utils/tools';
import CardTree from './compliance-card-production/card-tree.vue';
import CardProductionMain from './compliance-card-production/card-production-main.vue';
import { makePy } from '@/cache/pinyin';
/**
 * 合规卡查看和制作的内容大体一致 根据字段pageType区分共用组件
 */
@Component({ name: 'ComplianceCard', components: { CardTree, CardProductionMain } })
export default class ComplianceCard extends Vue {
    checkPermission = checkPermission;

    activeItem: string = 'fund'; // 当前树tab类型
    treeNodeData: any = {
        id: '1',
        label: '全部组合',
        level: 1,
    }; // 当前选中节点 TODO

    mounted() {
        let a = makePy('其他');
        console.log(a, 'a');
    }

    /**
     * 切换 来源/产品树 回调
     * @param 来源/产品 source/fund
     */
    handleActiveItem(param: string): void {
        this.activeItem = param;
    }

    /**
     * 切换 树节点 回调
     */
    handleTreeNodeData(data: any): void {
        console.log(data, 'handleTreeNodeDatahandleTreeNodeData');

        this.treeNodeData = data;
    }

    /**
     * tab切换 事件
     */
    handleTabClick({ name }): void {
        console.log(name, 'tab切换');
    }
}
</script>
<style lang="scss" scoped>
#content {
    height: 100%;
    min-width: 1250px;
}

/deep/ .el-tabs {
    .el-tabs__content {
        overflow: auto;
        .el-tab-pane {
            overflow: auto;
        }
    }
}

/deep/ .el-tabs .el-tabs__nav .is-active:hover,
/deep/ .el-tabs__item.is-active {
    font-weight: 700;
}

/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}

/deep/ .el-tabs__nav-wrap::after {
    height: 2px;
    background-color: var(--border-color);
}

/deep/ .el-tabs__active-bar {
    background-color: #f39500 !important;
}

/deep/ .el-tabs .el-tabs__nav .is-active {
    border: none;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    background-color: transparent;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    height: 39px;
    line-height: 39px;
}

/deep/ .el-input--mini .el-input__inner {
    font-size: 12px;
}
</style>
